<template>
  <div class="paying">
    <div class="price" v-for="(a, index) in orderlist" :key="index">
      {{ a.orderPrice }}
    </div>
    <button class="paybtn" @click="zfb">支付宝支付</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderId: "",
      // loading: false,
      orderlist: [],
      commodityId:window.sessionStorage.getItem('commodityId')
    };
  },

  methods: {
    zfb() {
      this.aaa = this.orderId.id;
      this.orderPrice = this.orderlist[0].orderPrice;
      // this.loading = true;
      let dataobj = {
        orderId: this.aaa, //随机生成唯一的就行了这个 自己找吧
        orderPrice: this.orderPrice,
      }

      let params = this.$qs.stringify(dataobj);
      console.log(this.aaa, 68686);
      console.log(params);
      this.$axios({
        method: "post",
        url: "pay",
        data: params,
      }).then((res) => {
        console.log(res);
        window.open(res.data.code);
      });
    },
  },
  sockets: {
    paysuccess(data) {
      console.log("支付成功", data);
      if (data.orderid == this.aaa) {
        // this.loading = false;
        this.$axios({
          url: "api/orderTable/zfsucceed",
          methods: "get", //type
          params: {
            orderId: this.orderId.id,
          },
        })
          .then((resp) => {
            console.log(resp);
            this.$axios({
              url:'api/commodityTable/comsucceed',
              methods:"get",
              params:{
                commodityId:this.commodityId
              }
            }).then(resp=>{
              console.log(resp);
              console.log(this.commodityId,4543654645);
            }).catch(err=>{
              console.log(err);
            })
          })
          .catch((err) => {
            console.log(err);
          });
        this.$alert("支付成功", "支付信息", {
          confirmButtonText: "确定",
          callback: () => {
            this.$router.push("/");
          },
        });
      }
    },
  },
  mounted() {
    this.orderId = JSON.parse(localStorage.getItem("orderId"));
    console.log(this.orderId, 2222);
    this.$axios({
      url: "api/orderTable/tallyorder",
      methods: "get", //type
      params: {
        orderId: this.orderId.id,
        category: this.orderId.type,
      },
    })
      .then((resp) => {
        console.log(resp);
        this.orderlist = resp.data.data;
        console.log(this.orderlist, 1111111);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.paying {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}
.price {
  width: 200px;
  height: 200px;
  margin-top: 100px;
  background-color: antiquewhite;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
.paybtn {
  width: 150px;

  height: 30px;
  margin-top: 100px;
  border: 0;
  background: gold;
  border-radius: 10px;
}
</style>